<!--公共的modal modal-->

<!--
element-ui dialog slot
title, Dialog 标题区的内容
footer, Dialog 按钮操作区的内容
—, Dialog 的内容
-->

<!--
modal slot
head, modal 标题区的内容&ndash;&gt;
body, modal 的内容
foot, modal 按钮操作区的内容
-->
<template>
  <el-dialog
    :custom-class="customClass"
    :visible="isShown"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="closeOnPressEscape"
    :modal="needModal"
    :show-close="showClose"
    :width="width"
    @close="close"
    @open="open">
    <span slot="title">
        <slot name="head"></slot>
    </span>
    <slot name="body"></slot>
    <span slot="footer">
      <slot name="foot"></slot>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    visible: Boolean,
    title: String,
    onClosed: Function,
    onOpen: Function,
    closeOnPressEscape: {
      default: false,
      type: Boolean
    },
    width: {
      default: '34%',
      type: String
    },
    customClass: {
      default: 'custom-dialog',
      type: String
    },
    showClose: {
      default: true,
      type: Boolean
    },
    needModal: { default: true }
  },
  computed: {
    isShown () {
      console.log(this.visible)
      return this.visible
    }
  },
  methods: {
    close () {
      this.$emit('onClosed')
    },
    open () {
      this.$emit('onOpen')
    }
  }
}
</script>

<style lang="scss">
  .custom-dialog{
    .el-dialog__header{
      border-bottom: 1px solid #e3e4e4;
    }
    .el-dialog__footer{
      padding: 0 20px 30px;
      .el-button--default, .el-button--primary{
        padding: 12px 30px;
      }
    }
  }
</style>
